<template>
  <div style="padding: 20px">
    <div class="m-b-20">
      <router-link class="btn-link-large add-btn" to="add">
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加仪表盘
      </router-link>
    </div>
    <el-table :data="tableData" style="width: 100%" @selection-change="selectItem">
      <!-- <el-table-column type="selection" :context="_self" width="50">
      </el-table-column> -->
      <el-table-column prop="name" label="标题">
      </el-table-column>
      <el-table-column inline-template label="创建时间" width="200">
        <div>
          {{ format(row.create_time) }}
        </div>
      </el-table-column>
      <el-table-column inline-template label="修改时间 " width="200 ">
        <div>
          {{ row.update_time?format(row.update_time):'' }}
        </div>
      </el-table-column>
      <el-table-column label="操作" inline-template width="200">
        <div>
          <span>
            <router-link :to="{ name: 'dashboardView', params: { id: row.id }}" class="btn-link edit-btn" style="background-color:#13CE66">
            查看
            </router-link>
          </span>
          <span>
            <router-link :to="{ name: 'dashboardEdit', params: { id: row.id }}" class="btn-link edit-btn">
            编辑
            </router-link>
          </span>
          <span>
            <el-button
            size="small"
            type="danger"
            @click="confirmDelete(row)">
            删除
            </el-button>
          </span>
        </div>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import btnGroup from '../../../Common/btn-group.vue'
import http from 'assets/js/http'

export default {
  data() {
      return {
        tableData: [],
        multipleSelection: []
      }
    },
    methods: {
      selectItem(val) {
        window.console && console.log(val)
        this.multipleSelection = val
      },
      confirmDelete(item) {
        this.$confirm('确认删除该仪表盘?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _g.openGlobalLoading()
          this.apiDelete('admin/dashboards/', item.id).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '删除成功')
              setTimeout(() => {
                _g.shallowRefresh(this.$route.name)
              }, 1500)
            })
          })
        }).catch(() => {
          // handel error
        })
      },
      format(v) {
        return moment(v * 1e3).format('YYYY-MM-DD H:mm:ss')
      },
    },
    created() {
      this.apiGet('admin/dashboards').then((res) => {
        this.handelResponse(res, (data) => {
          this.tableData = data
        })
      })
    },
    computed: {
      addShow() {
        return _g.getHasRule('dashboards-save')
      },
      editShow() {
        return _g.getHasRule('dashboards-update')
      },
      deleteShow() {
        return _g.getHasRule('dashboards-delete')
      }
    },
    components: {
      btnGroup
    },
    mixins: [http]
}
</script>
